<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <!-- 设置默认webkit引擎 -->
    <meta name="renderer" content="webkit">
    <meta charset="utf-8">

    <title>参数设置表管理</title>

    <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
	<link rel="stylesheet" type="text/css" href="extend/inputTags.css"/>

    <script type="text/javascript" charset="utf8" src="jquery.min.js"></script>
    <script type="text/javascript" charset="utf8" src="layui/layui.js"></script>
    <script type="text/javascript" charset="utf8" src="version.js"></script>

    <style>
        fieldset{
            color: #1E9FFF;
            font-weight: bolder;
        }
    </style>
</head>
<body>
<div class="layui-fluid larry-wrapper">
    <div class="layui-row layui-col-space30">
        <div class="layui-col-xs24">
            <!--列表-->
            <section class="panel panel-padding">
                <form class="layui-form">
                    <fieldset class="layui-elem-field">
                        <legend>房屋相关</legend>

                        <div class="layui-field-box">
                            <div class="layui-form-item" style="width: 90%;margin-left: 5%">
                                <label class="layui-form-label mylabel" style="font-size: 15px;color: #ff6436;width: 5%">
                                    <i class="layui-icon layui-icon-heart-fill"></i>
                                    一级结构
                                </label>
                                <div class="layui-input-block tags">
                                    <input class="layui-input " type="text" id="phase" placeholder="回车生成标签" autocomplete="off"/>
                                </div>
                            </div>
                        </div>

                        <div class="layui-field-box">
                            <div class="layui-form-item" style="width: 90%;margin-left: 5%">
                                <label class="layui-form-label mylabel" style="font-size: 15px;color: #dca300;width: 5%">
                                    <i class="layui-icon layui-icon-heart"></i>
                                    二级结构
                                </label>
                                <div class="layui-input-block tags">
                                    <input class="layui-input" type="text" id="building" placeholder="回车生成标签" autocomplete="off"/>
                                </div>
                            </div>
                        </div>

                        <div class="layui-field-box">
                            <div class="layui-form-item" style="width: 90%;margin-left: 5%">
                                <label class="layui-form-label mylabel" style="font-size: 15px;color: #63bf00;width: 5%">
                                    <i class="layui-icon layui-icon-light"></i>
                                    三级结构
                                </label>
                                <div class="layui-input-block tags">
                                    <input class="layui-input" type="text" id="unit" placeholder="回车生成标签" autocomplete="off"/>
                                </div>
                            </div>
                        </div>

                    </fieldset>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button id="submit" class="layui-btn" type="button">保存</button>

                            <button id="flatContent" class="layui-btn layui-btn-warm" type="button">flatContent</button>
                        </div>
                    </div>
                </form>
            </section>
        </div>
    </div>
</div>
</body>

<script type="text/javascript" charset="utf8">
	layui.use(['inputTags','form'], function () {
        var inputTags = layui.inputTags;

    $("#submit").on("click",function (){
        console.log(JSON.stringify(structShield));
        layer.msg(JSON.stringify(structShield));
    });

    $("#flatContent").on("click",function (){
        console.log(inputTags.config.flatContent);
        layer.msg(JSON.stringify(inputTags.config.flatContent));
    });

    var structShield={
        phase:[],
        building:[],
        unit:[]
    };

    inputTags.render({
        elem:'#phase',
        content: [],
        pinArray: ['期'],
        openFlatContent: true,
        aldaBtn: false,
        done: function(){
            structShield.phase=this.content;
        }
    });

    inputTags.render({
        elem:'#building',
        content: [],
        pinArray: ['栋'],
        openFlatContent: false,
        aldaBtn: false,
        done: function(){
            structShield.building=this.content;
        }
    });

    inputTags.render({
        elem:'#unit',
        content: [],
        pinArray: ['单元'],
        openFlatContent: true,
        aldaBtn: false,
        done: function(){
            structShield.unit=this.content;
        }
    })

});

</script>

</html>
